import { useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button, Col, Result, Row } from 'antd';
import VanillaTilt from 'vanilla-tilt';

export default function NoFound() {
  const navigate = useNavigate();
  const divEl = useRef<HTMLDivElement>(null); // 在ts中需要定义ref的属性类型

  useEffect(() => {
    const dom = divEl.current as HTMLDivElement;
    VanillaTilt.init(dom);
  }, []);
  const goHome = () => {
    console.log('------------>lalala<-------------------');
    navigate('/');
  };
  const goBack = () => {
    // navigate(-1);
    console.log('------------>lalala<-------------------');
  };
  return (
    <div
      style={{
        width: '100%',
        minHeight: '100%',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center'
      }}
    >
      <Result
        status="404"
        title="404"
        subTitle="抱歉，您访问的页面不存在。"
        extra={
          <Row gutter={50} justify="center">
            <Col>
              <div
                ref={divEl}
                style={{
                  width: '400px',
                  height: '200px',
                  lineHeight: '200px'
                }}
              >
                <Button
                  type="primary"
                  onClick={goBack}
                  style={{ marginRight: '40px' }}
                >
                  返回上一页
                </Button>
                <Button type="primary" onClick={goHome}>
                  返回首页
                </Button>
              </div>
            </Col>
          </Row>
        }
      />
    </div>
  );
}
